<template>
  <div class="root">
    <div style="float: right; margin-right: 20px">
      名称：<el-input
        v-model="params.dictName"
        placeholder="请输入"
        style="width: 240px; margin-right: 20px"
      />
      <el-button @click="init()">查询</el-button>
      <el-button style="margin-right: 300px" @click="reset()">重置</el-button>
      <el-button @click="save(params.type)">添加</el-button>
    </div>
    <div style="margin-bottom: 20px">
      <el-button-group class="ml-4">
        <el-button type="primary" color="white" @click="query('material')"
          >材质管理</el-button
        >
        <el-button type="primary" color="white" @click="query('spec')"
          >产品型号</el-button
        >
        <el-button type="primary" color="white" @click="query('brand')"
          >产品品牌</el-button
        >
        <el-button type="primary" color="white" @click="queryTree('category')"
          >产品分类</el-button
        >
      </el-button-group>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column
        prop="dictCode"
        label="编号"
        align="center"
        width="150"
      />
      <el-table-column prop="dictName" label="名称" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="right" header-align="center">
        <template v-slot="{ row }">
          <el-button
            v-if="row.parentId == 0"
            type="primary"
            :icon="Plus"
            circle
            @click="save(params.type, row.id, row.dictName)"
          />
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="
              edit(
                params.type,
                row.parentId,
                '',
                row.id,
                row.dictName,
                row.categoryType
              )
            "
          />
          <el-button
            type="danger"
            :icon="Delete"
            circle
            style="margin-right: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
    <addOrUpdate
      ref="updateData"
      :visible="isShow"
      @close="isShow = false"
      @reflush="init()"
    />
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
import { queryList, queryTreeList, queryPName } from "@/api/system/dict.js";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import addOrUpdate from "./addOrUpdate.vue";

//监听子组件关闭事件
const isShow = ref(false);

const updateData = ref(null);

const tableData = ref([]);

const params = ref({
  type: "",
  dictName: ""
});

async function query(par) {
  params.value.type = par;
  let res = await queryList(params.value);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}
async function queryTree(par) {
  params.value.type = par;
  let res = await queryTreeList(params.value);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}
async function init() {
  let res = ref(null);
  if (params.value.type == "") {
    params.value.type = "material";
    res.value = await queryList(params.value);
  } else if (params.value.type == "category") {
    res.value = await queryTreeList(params.value);
  } else res.value = await queryList(params.value);
  if (res.value.code == 200) {
    tableData.value = res.value.data;
  }
}

function save(type, pid, pname) {
  isShow.value = true;
  updateData.value.init(type, pid, pname);
}
async function edit(type, pid, pname, id, name, category) {
  if (type == "category") {
    let res = await queryPName(pid);
    pname = res.data;
    isShow.value = true;
    updateData.value.init(type, pid, pname, id, name, category);
  } else {
    isShow.value = true;
    updateData.value.init(type, "", "", id, name, "");
  }
}

function reset() {
  params.value.dictName = "";
  init();
}
onBeforeMount(() => {
  init();
});
</script>

<style scoped>
.root {
  background-color: white;
  padding: 20px;
}
</style>
